<template>
	<view class="statistics">
		<view class="top">
			<view class="total">
				<view class="day" @click="dianji(1)" :class="active==1?'day1':'day'">
					日结
				</view>
				<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
				<view class="month" @click="dianji(2)" :class="active==2?'month1':'month'">
					月结
				</view>
				<view class="app" v-show="app">
					<view class="box">
						<view class="header">
							<view @click="back" class="back"><<</view>
							<view>{{year}}年</view>
							<view @click="add" class="add">>></view>
						</view>
						<view class="content">
							<view :class="item.month===month?'active':''" v-for="(item,index) in months" :key="index"
								@click="selectmonth(item.month)">
								{{item.Chinesemonth}}
							</view>
						</view>
						<view class="footer">
							<view class="no" @click="no">取消</view>
							<view @click="ok" class="ok">确定</view>
						</view>
					</view>
				</view>
				<image src="../../static/calendar(1).png" mode="" @click="image"></image>
			</view>
		</view>
		<view class="list">
			<view class="list_1">
				<view class="list1">
					总收入(元)
				</view>
			</view>
			<view class="list_1">
				<view class="list1">
					成单量(单)
				</view>
			</view>
			<view class="list_1" style="width: 35%;">
				<view class="list2">
					公里数(KM)
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app:"",
				active: '',
				show: false,
				mode: 'date',
				year: 2021,
				month: 0,
				months: [{
						month: 1,
						Chinesemonth: "一月",
					},
					{
						month: 2,
						Chinesemonth: "二月",
					},
					{
						month: 3,
						Chinesemonth: "三月",
					},
					{
						month: 4,
						Chinesemonth: "四月",
					},
					{
						month: 5,
						Chinesemonth: "五月",
					},
					{
						month: 6,
						Chinesemonth: "六月",
					},
					{
						month: 7,
						Chinesemonth: "七月",
					},
					{
						month: 8,
						Chinesemonth: "八月",
					},
					{
						month: 9,
						Chinesemonth: "九月",
					},
					{
						month: 10,
						Chinesemonth: "十月",
					},
					{
						month: 11,
						Chinesemonth: "十一月",
					},
					{
						month: 12,
						Chinesemonth: "十二月",
					},
				],
			}
		},
		methods: {
			selectmonth(m) {
				this.month = m;
			},
			back() {
				this.year--;
			},
			add() {
				this.year++;
			},
			ok() {
				if(this.month>0){
					this.app=false
				}
				console.log(`${this.year}-${this.month}`);
			},
			no(e){
				this.app=false
				console.log(e)
			},
			dianji(val) {
				this.active = val;
			},
			change(e) {
				console.log(e);
			},
			image() {
				if (this.active == 1) {
					this.show = !this.show;
				}else{
					this.app = !this.app;
				}
			},
		}
	}
</script>

<style>
	.statistics {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}

	.top {
		width: 100%;
		height: 400rpx;
		background-color: rgb(51, 143, 237);
		display: flex;
	}

	.total {
		display: flex;
		flex-direction: row;
		border-radius: 4rpx;
		width: 100%;
		justify-content: center;
		color: #FFFFFF;
		height: 23px;
		margin-top: 5%;
	}

	.day {
		width: 25%;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		border-right: 0;
		margin-left: 19%;
		border-radius: 4px 0px 0px 4px;
	}

	.day1 {
		width: 25%;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		border-right: 0;
		background-color: #FFFFFF;
		margin-left: 19%;
		border-radius: 4px 0px 0px 4px;
		color: rgb(51, 143, 237);
	}

	.month {
		width: 25%;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		border-radius: 0px 4px 4px 0px;
	}

	.month1 {
		width: 25%;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		background-color: #FFFFFF;
		color: rgb(51, 143, 237);
		border-radius: 0px 4px 4px 0px;
	}

	.total image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 13%;
	}

	.list {
		color: rgb(51, 143, 237);
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
	}

	.list_1 {
		width: 40%;
		text-align: center;
		padding: 30rpx;
	}

	.list1 {
		border-right: 1px solid rgb(51, 143, 237);
		height: 40rpx;
		padding-right: 40rpx;
	}

	.list2 {
		height: 40rpx;
	}


	.box {
		width: 85%;
		border-radius: 4px;
		border: 1px solid #ccc;
		background-color: #FFFFFF;
		color: black;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 6px;
		align-items: center;
		border-bottom: 1px solid #c1c1c1;
	}

	.back,
	.add {
		cursor: pointer;
		padding: 8rpx 20rpx;
		font-size: 26rpx;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #c1c1c1;
	}

	.content view{
		   width: 14%;
		       height: 44rpx;
		       margin: 4% 1%;
		       text-align: center;
	}
	.footer {
		display: flex;
	}

	.footer>div {
		flex: 1 0 50%;
		text-align: center;
		padding: 20px 0;
		cursor: pointer;
	}

	.ok {
		border-left: 1px solid #c1c1c1;
		color: rgb(31, 166, 233);
		width: 50%;
		    padding: 24rpx;
		    text-align: center;
	}
	
	.no{
		width: 50%;
		    padding: 24rpx;
		    text-align: center;
	}
	.content>div {
		flex: 1 0 15%;
		text-align: center;
		padding: 20px 0;
		cursor: pointer;
	}

	.active {
		color: white;
		background-color: #6cf;
	}
</style>
